<template>
	<view class="content-header">
		<view class="top20"></view>
		<view class="order flex-column">
			<view>合计支付</view>
			<view class="flex-row order-price flex-content-center">
				<view class="order-price1">¥</view>
				<view class="order-price2" v-if="orderInfo!=null">{{orderInfo.total_money}}</view>
				</view>
		</view>
		<view class="top20"></view>
		<view class="score-1 flex-column" v-if="orderInfo!=null&&orderInfo.max_score>0">
			<view class="score-top">
				<view class="flex-row flex-content-between flex-item-center ">
					<view class="flex-row score-2 flex-item-center">
						<image src="../../static/user/jf.png" mode="scaleToFill"></image>
						<view>积分支付</view>
						<view>拥有数量：200</view>
					</view>
					<image class="dg-img" @tap="use_score=!use_score" :src="use_score?`../../static/order/ok.png`:`../../static/order/not.png`" mode="scaleToFill"></image>
					
				</view>
				<view v-if="use_score">
					<view class="score-3">此单最多可使用100积分</view>
					<view class="flex-column flex-item-center input-price-top">
						<view class="input-price">
							<input type="number" class="input" v-model="score" placeholder="请输入积分数量" placeholder-class="input-price-p"/>
						</view>
					</view>
					<view class="flex-row flex-content-between score-pay-money">
						<view>实付款：</view>
						<view>￥30</view>
					</view>
				</view>
				
				
			</view>
		</view>
		<view class="pay">
			<view class="pay-detal flex-column">
				<view class="pay-detal-txt1">支付方式</view>
				<view class="flex-column" v-if="orderInfo!=null&&orderInfo.pay_list.length>0">
					<view class="flex-column" v-for="(pay,payIndex) in orderInfo.pay_list">
						<view class="flex-row flex-content-between pay-detal1">
							<view class="flex-row pay-detal-txt">
								<image :src="$utils.cdnImg(pay.image)" mode="scaleToFill"></image>
								<view>{{pay.title}}</view>
							</view>
							<image @tap="selctPayList(pay,payIndex)" class="pay-detal-img" :src="payIndex==selectedPay?`../../static/order/ok.png`:`../../static/order/not.png`" mode="scaleToFill"></image>
							
						</view>
						<view v-if="pay.ident==`bankpay`" class="bank">
							<view class="flex-row bank-one flex-item-center" v-if="has_bank==false" @tap="goaddbank">
								<view class="bank-txt1">添加银行卡</view>
								<image class="bank-img1" src="../../static/order/you.png" mode="scaleToFill"></image>
							</view>
							<view class="flex-row bank-one flex-item-center" v-if="has_bank==true&&selectObj!=null" @tap="changeCards">
								<image class="bank-img2" :src="$utils.cdnImg(selectObj.bank.back_image)" mode="scaleToFill"></image>
								<view class="bank-txt2">{{selectObj.bank.name}}（{{selectObj.card_num.substr(-4)}}）</view>
								<image class="bank-img1" src="../../static/order/you.png" mode="scaleToFill"></image>
							</view>
						</view>
					</view>
					
					<!-- <view class="flex-row flex-content-between pay-detal1">
						<view class="flex-row pay-detal-txt">
							<image src="../../static/order/wx.png" mode="scaleToFill"></image>
							<view>微信支付</view>
						</view>
						<image class="pay-detal-img" src="../../static/order/not.png" mode="scaleToFill"></image>
					</view>
					<view class="flex-row flex-content-between pay-detal1">
						<view class="flex-row pay-detal-txt">
							<image src="../../static/order/ye.png" mode="scaleToFill"></image>
							<view>余额支付</view>
						</view>
						<image class="pay-detal-img" src="../../static/order/not.png" mode="scaleToFill"></image>
					</view> -->
				</view>
				
			</view>
		</view>
		<mu-suspension bottom="110" >
			<view class="foot flex-row flex-content-center">
				<view class="btn" @tap="confimPay">确认支付</view>
			</view>
		</mu-suspension>
		<!-- 选择银行卡开始 -->
		<uni-popup ref="changebank" type="bottom">
			<view class="bank-list flex-column">
				<view class="bank-list-header flex-row flex-content-between">
					<view class="bank-list-header-txt">选择支付银行卡</view>
					<image @tap="closeChangeBank" class="bank-list-header-img" src="../../static/order/x.png" mode="scaleToFill"></image>
				</view>
				<view class="bank-list-sch">
					<scroll-view :scroll-y="true" class="bank-list-scroll">
						<view class="bank-list-bankone flex-row flex-content-between flex-item-center" v-for="(bank,bankIndex) in bankList" @tap="xuanzBank(bankIndex)">
							<view class="flex-row flex-item-center">
								<image class="bank-list-bankone-img1" :src="$utils.cdnImg(bank.bank.back_image)" mode="scaleToFill"></image>
								<view class="flex-column bank-list-bankone-txt1">
									<view>{{bank.bank.name}} {{bank.type==1?`储蓄卡`:`信用卡`}}</view>
									<view>（{{bank.card_num.substr(-4)}}）</view>
								</view>
							</view>
							<!-- <image  class="bank-list-bankone-img2" :src="bank.selected?`../../static/order/ok.png`:`../../static/order/not.png`" mode="scaleToFill"></image> -->
						</view>
						<view class="bank-list-bankone flex-row flex-content-between flex-item-center" @tap="goaddbank">
							<view class="flex-row">
								<image class="bank-img22" src="../../static/order/ka.png" mode="scaleToFill"></image>
								<view class="bank-txt22">使用新卡支付</view>
							</view>
							<image class="bank-img1" src="../../static/index/you.png" mode="scaleToFill"></image>
						</view>
					</scroll-view>
				</view>

			</view>
		</uni-popup>
		<!-- 选择银行卡结束 -->
		<!-- 输入短信验证码弹框开始 -->
		<uni-popup ref="dx" type="center">
			<view class="dx-view flex-column">
				<view class="flex-row flex-content-end">
					<image @tap="closex" class="x" src="../../static/order/x.png" mode="scaleToFill"></image>
				</view>
				<view class="x-1">请填写手机短信验证码</view>
				<view class="x-2">已发送到手机号：18916224432</view>
				<view class="x-input">
					<input v-model="code" placeholder="请输入验证码" placeholder-class="x-input-p"/>
				</view>
				<view class="x-btn">确认</view>
				<view class="totbor">60s后可重发</view>
			</view>
		</uni-popup>
		<!-- 输入短信验证码弹框结束 -->
	</view>
</template>

<script>
	export default{
		data(){
			return{
				// kj:true,//选择快捷支付
				selectedPay:0,//选择的支付
				payInfo:null,//选择的支付类型详情
				// selectObj:null,//
				// has_bank:false,//是否有银行卡
				code:"",//用户验证码
				score:"",//用户输入积分数
				use_score:true,
				max_score:50,
				order_num:"",//订单号
				orderInfo:null,//订单详情
				is_pay:false,
				// bankList:[
					
				// ]
			}
		},
		computed:{
			bankList(){
				return this.$store.state.usercard.bankList
			},
			has_bank(){
				return this.$store.state.usercard.has_bank
			},
			selectObj(){
				return this.$store.state.usercard.selectObj
			}
		},
		onLoad(opt) {
			if(opt.order_num){
				this.order_num = opt.order_num;
				this.getOrderInfo();
			}
		},
		onShow() {
			if(this.is_pay){
				uni.navigateTo({
					url:"/pages/order/order_status?status=0&order_num="+res.order_num
				})
			}
		},
		methods:{
			//选择银行卡
			xuanzBank(index){
				this.$store.commit("changeCount",index)
				this.$refs.changebank.close();
			},
			//选择支付类型
			selctPayList(payInfo,payindex){
				this.payInfo = payInfo
				this.selectedPay = payindex
			},
			//获取订单详情
			getOrderInfo(){
				let that = this
				this.$api.getOrderPay({
					order_num:this.order_num
				}).then(res=>{
					// console.log(res);
					that.orderInfo = res;
					if(res.pay_list&&res.pay_list.length>0){
						that.payInfo = res.pay_list[0]
						res.pay_list.forEach(it=>{
							if(it.ident=="bankpay"){
								that.getUserBankCard();
							}
						})
					}
				})
			},
			//获取用户银行卡
			getUserBankCard(){
				this.$store.dispatch("getUserCard")
			},
			//确认支付
			async confimPay(){
				let selectedPay = this.selectedPay;
				let data = {
					order_num:this.order_num,
					ident:this.payInfo.ident,
					score:this.score,
				}
				data.code = await this.$utils.getCode();
				// console.log(data);
				// console.log(uni.getStorageSync('token'));
				// return
				let that = this;
				this.$api.pay(data).then(res=>{
					that.$store.dispatch("getOrderList")
					that.$store.dispatch("getOrderStatus")
					console.log(res);
					if(res.type==0){
						uni.navigateTo({
							url:"/pages/order/order_status?status=1&order_num="+res.order_num
						})
					}else if(res.type==1){
						if(that.payInfo.ident=='wecate'){
							uni.requestPayment({
								provider:"wxpay",
								orderInfo:res.result,
								timeStamp:res.result.timeStamp,
								nonceStr:res.result.nonceStr,
								package:res.result.package,
								signType:res.result.signType,
								paySign:res.result.paySign,
								success(ress) {
									uni.navigateTo({
										url:"/pages/order/order_status?status=1&order_num="+res.order_num
									})
								},
								fail() {
									uni.navigateTo({
										url:"/pages/order/order_status?status=2&order_num="+res.order_num
									})
								}
							})
						}else if(that.payInfo.ident=='alipay'){
							uni.requestPayment({
								provider:"alipay",
								orderInfo:res.result
							})
						}
					}else if(res.type==2){
						// #ifdef H5
						that.is_pay = true;
						window.location.href = res.url
						
						// #endif
						// #ifdef APP
						that.is_pay = true;
						plus.webview.open(res.url)
						// #endif
					}else{
						console.log("暂时没有可使用的方法");
					}
				})
				
				// console.log(data);
				// uni.navigateTo({
				// 	url:"/pages/order/order_status"
				// })
			},
			//关闭银行选择框
			closeChangeBank(){
				this.$refs.changebank.close()
			},
			//打开银行选择框
			changeCards(){
				this.$refs.changebank.open()
			},
			//到添加银行卡页面
			goaddbank(){
				uni.navigateTo({
					url:'/pages/bank/add_bank'
				})
			},
			closex(){
				// console.log('haha');
				this.$refs.dx.close();
			}
		}
	}
</script>

<style lang="scss">
	.score-pay-money{
		margin-top: 38rpx;
		>view:nth-child(1){
			font-size: 28rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
		}
		>view:nth-child(2){
			font-size: 28rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #ED5126;
		}
	}
	.input{
		padding-top: 18rpx;
		text-align: center;
	}
	.input-price-p{
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
	}
	.input-price-top{
		margin-top: 12rpx;
	}
	.input-price{
		width: 523rpx;
		height: 76rpx;
		background: #FFFFFF;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		opacity: 1;
		border: 1px solid #CFCFCF;
	}
	.score-top{
		margin-left: 20rpx;
		margin-right: 30rpx;
		// padding-top: ;
	}
	.score-3{
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		margin-left: 67rpx;
		margin-top: 30rpx;
	}
	.dg-img{
		width: 32rpx;
		height: 32rpx;
	}
	.score-top{
		margin-left: 20rpx;
		margin-right: 30rpx;
		padding-top: 30rpx;
	}
	.score-2{
		>image{
			width: 42rpx;
			height: 42rpx;
		}
		>view:nth-child(2){
			font-size: 28rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
			margin-left: 25rpx;
			line-height: 42rpx;
			
		}
		>view:nth-child(3){
			font-size: 24rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			margin-left: 20rpx;
			line-height: 42rpx;
		}
	}
	.score-1{
		width: 690rpx;
		// height: 330rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		opacity: 1;
		margin-left: 30rpx;
		margin-bottom: 20rpx;
		padding-bottom: 30rpx;
	}
	.totbor{
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		text-align: center;
		margin-top: 20rpx;
	}
	.x-btn{
		width: 400rpx;
		height: 90rpx;
		background: #FFFFFF;
		border-radius: 48rpx 48rpx 48rpx 48rpx;
		opacity: 1;
		border: 1px solid #69D330;
		font-size: 30rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #69D330;
		text-align: center;
		line-height: 90rpx;
		margin-top: 60rpx;
		margin-left: 101rpx;
	}
	.x-input-p{
		color: #999999;
		font-size: 36rpx;
		line-height: 70rpx;
	}
	.x-input{
		width: 500rpx;
		height: 70rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		opacity: 1;
		border: 1px solid #CECECE;
		margin-left: 54rpx;
		margin-top: 40rpx;
		>input{
			line-height: 70rpx;
			height: 70rpx;
			padding-left: 23rpx;
		}
	}
	.x-2{
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		margin-top: 26rpx;
		text-align: center;
	}
	.x-1{
		font-size: 34rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
		text-align: center;
		margin-top: 22rpx;
	}
	.x{
		width: 28rpx;
		height: 28rpx;
		margin-top: 40rpx;
		margin-right: 40rpx;
	}
	.dx-view{
		width: 610rpx;
		height: 570rpx;
		background-color: #FFFFFF;
	}
	.bank-img22{
		width: 50rpx;
		height: 39rpx;
	}
	.bank-txt22{
		font-size: 30rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
		margin-left: 36rpx;
	}
	.bank-list-add{
		
	}
	.bank-list-bankone-txt1{
		margin-left: 36rpx;
		>view{
			font-size: 32rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
		}
	}
	.bank-list-bankone-img2{
		width: 36rpx;
		height: 30.44rpx;
	}
	.bank-list-bankone-img1{
		width: 50rpx;
		height: 50rpx;
	}
	.bank-list-bankone{
		margin-bottom: 80rpx;
	}
	.bank-list-sch{
		margin-top: 80rpx;
		margin-left: 30rpx;
	}
	.bank-list-scroll{
		width: 690rpx;
		height: 492rpx;
	}
	.bank-list-header-img{
		width: 28rpx;
		height: 28rpx;
		margin-top: 64rpx;
		margin-right: 54rpx;
	}
	.bank-list-header-txt{
		font-size: 36rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
		line-height: 156rpx;
		margin-left: 219rpx;
	}
	.bank-list-header{
		width: 690rpx;
		height: 156rpx;
		border-bottom: 1px solid #EEEEEE;
		margin-left: 30rpx;
	}
	.bank-list{
		width: 750rpx;
		height: 836rpx;
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 0px 0px;
		opacity: 1;
	}
	.bank-img2{
		width: 34rpx;
		height: 34rpx;
	}
	.bank-one{
		margin-top: 28rpx;
		border-bottom: 1px solid #EBEBEB;
		padding-bottom: 30rpx;
	}
	.bank-txt1{
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
	}
	.bank-txt2{
		font-size: 30rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
		margin-left: 14rpx;
	}
	.bank-img1{
		width: 14rpx;
		height: 23rpx;
		margin-left: 12rpx;
	}
	.bank{
		margin-left: 67rpx;
		
	}
	.btn{
		width: 400rpx;
		height: 90rpx;
		background: linear-gradient(90deg, $default-button-color 0%, $default-button-end-color 100%);
		border-radius: 45rpx 45rpx 45rpx 45rpx;
		opacity: 1;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		text-align: center;
		line-height: 90rpx;
	}
	.foot{
		width: 750rpx;
		height: 136rpx;
	}
	.pay-detal1{
		margin-top: 40rpx;
	}
	.pay-detal11{
		margin-top: 40rpx;
		border-bottom: 2rpx solid #EBEBEB;
	}
	.pay-detal-img{
		width: 32rpx;
		height: 32rpx;
	}
	.pay-detal-txt{
		>image:nth-child(1){
			width: 42rpx;
			height: 42rpx;
		}
		>view:nth-child(2){
			font-size: 28rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
			margin-left: 25rpx;
		}
	}
	.pay-detal-txt1{
		font-size: 30rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #333333;
	}
	.pay-detal{
		// margin-top: 40rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
		padding-top: 40rpx;
	}
	.pay{
		width: 690rpx;
		// height: 408rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		opacity: 1;
		margin-left: 30rpx;
		padding-bottom: 41rpx;
	}
	.order-price{
		text-align: center;
	}
	.order-price1{
		font-size: 40rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
		margin-top: 41rpx;
	}
	.order-price2{
		font-size: 60rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
		margin-top: 21rpx;
	}
	.order{
		width: 690rpx;
		height: 300rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		opacity: 1;
		margin-left: 30rpx;
		text-align: center;
		>view:nth-child(1){
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			margin-top: 84rpx;
		}
	}
</style>